{% extends 'base.html' %} {% block head %} {% endblock %} {% block content %}
<div class="container mx-auto">
  <h1 class="text-3xl font-bold text-gray-800 mb-6">我的笔记</h1>

  {% if notebooks %}
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {% for notebook in notebooks %}
    <a class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow" href="{% url 'notebook:notebook_content' notebook.id %}">
      <h2 class="text-xl font-semibold text-gray-800 mb-2">{{ notebook.title }}</h2>
      <p class="text-gray-600 text-sm mb-4 line-clamp-3">{{ notebook.content|truncatewords:30 }}</p>
      <div class="flex justify-between items-center">
        <span class="text-xs text-gray-500">{{ notebook.updated_time|date:"Y-m-d H:i" }}</span>
        <span
          class="px-2 py-1 text-xs rounded {% if notebook.state == 0 %}bg-yellow-100 text-yellow-800{% elif notebook.state == 1 %}bg-green-100 text-green-800{% elif notebook.state == 2 %}bg-blue-100 text-blue-800{% else %}bg-gray-100 text-gray-800{% endif %}">
          {{ notebook.get_state_display }}
        </span>
      </div>
      {% if notebook.category_set.all %}
      <div class="text-xs mt-1 space-x-1">
        {% for category in notebook.category_set.all %}
        <span class="px-2 py-1 text-xs rounded bg-gray-100"> {{ category.name }} </span>
        {% endfor %}
      </div>
      {% endif %}
    </a>
    {% endfor %}
  </div>
  {% else %}
  <div class="container mx-auto size-full flex items-center justify-center">
    <div class="grow px-6 py-24 mb-6">
      <h1 class="text-6xl font-bold text-gray-800 mb-4">没有笔记</h1>
    </div>
  </div>
  {% endif %}
  <div class="mt-4 space-x-2">
    {% if notebooks.has_previous %} {% if notebooks.previous_page_number == 1 %}
    <a href="{% url 'notebook:notebook_list' %}" class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">上一页</a>
    {% else %}
    <a href="{% url 'notebook:notebook_list_page' notebooks.previous_page_number %}" class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300"
      >上一页</a
    >
    {% endif %} {% endif %}
    <span class="px-3 py-1 bg-blue-400 text-white rounded"> 第 {{ notebooks.number }} 页 / 共 {{ notebooks.paginator.num_pages }} 页 </span>
    {% if notebooks.has_next %}
    <a href="{% url 'notebook:notebook_list_page' notebooks.next_page_number %}" class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">下一页</a>
    {% endif %}
  </div>
</div>
{% endblock %}
